<!DOCTYPE html>
<html class="um landscape min-width-240px min-width-320px min-width-480px min-width-768px min-width-1024px">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta name="description" content="" />
        <meta name="keywords" content="" />
        <meta name="author" content="Flying hormone" />
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
        <meta name="renderer" content="webkit">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta charset="UTF-8">
        <link rel="stylesheet" href="../css/media.css" />
        <link rel="stylesheet" href="../css/mui.min.css" />
        <link rel="stylesheet" href="../css/head_foot.css" />
        <script type="text/javascript" src="../js/jquery-1.9.1.js"></script>
        <script type="text/javascript" src="../js/jquery.Query.js" ></script>
        <script type="text/javascript" src="../js/jquery-cookie.js"></script>
        <script type="text/javascript" src="../js/mui.min.js"></script>
        <script type="text/javascript" src="../js/appcan.js"></script>
        <script type="text/javascript" src="../js/appcan.control.js"></script>
        <script type="text/javascript" src="../js/common.js" ></script>
		<title>我的名片</title>
		<style>
            

            .yiyou{ height: 2.5em; line-height: 2.5em; position: relative; background: #fff; margin: 0.3125em 0;}
            .yiyou h3{ height: 2.5em; line-height: 2.5em;  font-size: 0.8em; text-indent: 1em;}
            .yiyou p{ position: absolute; top: 0; right: 0; line-height: 2.5em;}
            .yiyou p a{ color: #999; border: 1px solid #ddd; padding: 0.125em 0.625em; border-radius: 0.25em; margin-right: 0.3125em;}
            .card_list li{ height: 5em; background: #fff; margin-bottom: 0.3125em; position: relative;}
            .card_list img{ width: 3.125em; height: 3.125em; margin-top: 1em; margin-left: 0.625em;}
            .card_list p{ position: absolute; width:7em; overflow: hidden; left: 5.625em; top: 0; line-height: 5em; color: #333; font-size: 1em;}
            .card_list span{ display: none; position: absolute; top: 1em; right: 0.625em; font-size: 2.5em; color: #0070c5;}
            .card_list .isuser{ color: #999;right: 3.6em;top: 2.2em;position: absolute;}
        </style>
	</head>

	<body>
		<header>
			<a><span class="leftleft"></span></a>
			<h1>我的名片</h1>
		</header>
		<section class="yiyou">
			<h3>已有名片</h3>
			<p><a id="isUser" href="javascript:;">使用</a><a id="del" href="javascript:;">删除</a><a id="edit" href="javascript:;">编辑</a><a id="add">添加</a></p>
		</section>
		<section class="card_list">
			<ul id="cardList">
			</ul>
		</section>

		<footer>
			<nav class="mui-bar mui-bar-tab">
				<a href="javascript:;" id="tcIndex">
                    <img src="../img/shouye2.png" />
                    <span class="mui-tab-label">首页</span>
                </a>
                <a href="javascript:;" id="myfabu">
                    <img src="../img/fabu2.png" />
                    <span class="mui-tab-label">发布</span>
                </a>
                <a class="action" href="javascript:;" id="myInfo">
                    <img src="../img/mine2.png" />
                    <span class="mui-tab-label">我的</span>
                </a>
			</nav>
		</footer>
		<script>
			$(document).ready(function(){
			     var isChangeId = "";
			    //添加
    		    appcan.ajax({
                    type:"post",
                    async:false,       
                    url:host+"/getCardList.json?userId="+appcan.locStorage.getVal("userId"),
                    data:"",
                    dataType:"json",
                    contentType: "application/json",
                    success : function(dataResult) {
                        var dataList = dataResult.data;
                        var cardStr = "";
                        if(dataList.length>0){
                            for(var i=0;i<dataList.length;i++){
                                cardStr +='<li data-id="'+dataList[i].id+'">';
                                cardStr +='<img src="'+hostIp+dataList[i].picUrl+'" />';
                                cardStr +='<p>'+dataList[i].cardName+'</p>';
                                if(dataList[i].state=='2'){
                                    cardStr +='<a class="isuser" href="javascript:;">当前使用</a>';
                                }
                                cardStr +='<span class="duidui"></span>';
                                cardStr +=' </li>';
                            }
                        }
                        $("#cardList").html(cardStr);
                        
                        $(".card_list li").click(function(){
                            if( $(this).find("span").css("display") == "block"){
                                $(".card_list li span").hide();
                                $(this).find("span").hide();
                                isChangeId = "";
                            }else{
                                $(".card_list li span").hide();
                                $(this).find("span").show();
                                isChangeId = $(this).attr("data-id");
                            }
                        });
                    }
                }) 
                //删除
                $("#del").click(function(){
                    if(isChangeId!="" && confirm('你确定要删除?')){
                        //名片删除
                        appcan.ajax({
                           type:"post",
                           async:false,       
                           url:host+"/delCard.json?cardId="+isChangeId,
                           data:"",
                           dataType:"json",
                           contentType: "application/json",
                           success : function(dataResult) {
                               if(dataResult.msg=='success'){
                                   alert("删除成功！");
                                   window.location.reload();
                               }
                           }
                       })
                   }
                })
                //编辑
                $("#edit").click(function(){
                    if(isChangeId!=""){
                        openUrl("add_card.html?cardId="+isChangeId,"addCard");
                    }
                })
                //添加
                $("#add").click(function(){
                    openUrl("add_card.html?cardId=","addCard");
                })
                //编辑
                $("#isUser").click(function(){
                    if(isChangeId!=""){
                        var returnUrl = getVal("returnUrl");
                        if(!!returnUrl){
                            setVal("returnUrl", "");
                            if(returnUrl == "msg"){
                                openUrl('add_message.html?cardId='+isChangeId, 'add_message');
                            }else{
                                openUrl('moban_shiyong.html?cardId='+isChangeId, 'moban_shiyong');
                            }
                        }else{
                            appcan.ajax({
                               type:"post",
                               async:false,       
                               url:host+"/useCard.json?cardId="+isChangeId+"&userId="+appcan.locStorage.getVal("userId"),
                               data:"",
                               dataType:"json",
                               contentType: "application/json",
                               success : function(dataResult) {
                                   if(dataResult.msg=='success'){
                                       window.location.reload();
                                   }
                               }
                           })
                        }
                    }
                })
			});
		</script>
	</body>

</html>